<template>
    <!-- 整体趋势 -->
  <div class="overallTrend">
    <div class="head">
      <el-row type="flex" align="middle" justify="space-between">
        <el-col :span="4">
          <p style="font-weight: 700;padding-left: 20px;">整体趋势</p>
        </el-col>
        <el-col :span="12" :offset="14">
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator=""
            start-placeholder="请选择日期范围"
          >
          </el-date-picker>
        </el-col>
      </el-row>
    </div>
<div class="tab">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="新增用户" name="first"></el-tab-pane>
    <el-tab-pane label="活跃用户" name="second"></el-tab-pane>
    <el-tab-pane label="启动次数" name="third"></el-tab-pane>
    <el-tab-pane label="累计用户" name="fourth"></el-tab-pane>
    <el-tab-pane label="错误数" name="five"></el-tab-pane>
    <el-tab-pane label="活跃用户构成" name="six"></el-tab-pane>
    <el-tab-pane label="新增用户次日留存率" name="seven"></el-tab-pane>
    <el-tab-pane label="平均日启动次数" name="eight"></el-tab-pane>
  </el-tabs>
</div>
<div class="content">
   <Echarts :echartsData="echartsData" :idName="'overallTrend'"></Echarts>
</div>
  </div>
</template>

<script>
import Echarts from '../../components/echarts.vue'
export default {
      components:{
        Echarts
    },
data(){
  
    return {
      value:'',
        activeName:'first',
        dataValue:'',
        echartsData:{
        
          xAxisData:['2018-06-30', '2018-07-09', '2018-07-18', '2018-07-27', '2018-08-05', '2018-08-14'],
            series: [
          {

            name: '新增用户',
            type: 'line',
            stack: 'Total',
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210],
            smooth:.2

            
          }
  ]

        },

    }
},
methods:{
    handleClick(){

    }
}
}
</script>

<style scoped>
* {
  padding:0;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
 border-bottom: 1px solid transparent;
}
</style>